<template>
  <div class="register">
    <div class="regbox">
      <div class="reg-title">
        <h2>商标专用权质权登记</h2>
      </div>
      <div class="reg-form">
        <form action>
          <div class="form-box">
            <span>代理机构id：</span>
            <input type="text" class="form-control" disabled v-model="data.agency" />
          </div>
          <div class="form-box">
            <span>担保债权数额：</span>
            <input type="text" class="form-control" disabled v-model="data.amount_sec" />
          </div>
          <!--
          <div class="form-box">
            <span>是否共有商标：</span>
            <el-radio v-model="radio" label="是">是</el-radio>
            <el-radio v-model="radio" label="否">否</el-radio>
          </div>
          -->
          <div class="form-box">
            <span>申请编号：</span>
            <input type="text" class="form-control" v-model="data.code_apply" />
          </div>
          <div class="form-box">
            <span>权质人:</span>
            <input
              type="text"
              class="form-control"
              placeholder="权质人"
              :style="{border:redone}"
              v-model="data.pledgee"
              @blur="numShow"
            />
            <transition name="fade">
              <i v-if="numHintShow">请填写此字段</i>
            </transition>
          </div>
          <div class="form-box">
            <span>出质人:</span>
            <input
              type="text"
              class="form-control"
              placeholder="出质人"
              :style="{border:redtwo}"
              v-model="data.pledgor"
              @blur="amountShow"
            />
            <transition name="fade">
              <i v-if="amountHintShow">请填写此字段</i>
            </transition>
          </div>

          <div class="form-box">
            <span>出质商标注册号:</span>
            <input
              type="text"
              class="form-control"
              placeholder="出质商标注册号"
              :style="{border:redthree}"
              v-model=" data.reg_number"
              @blur="deadShow"
            />
            <transition name="fade">
              <i v-if="deadlineHintShow">请填写此字段</i>
            </transition>
          </div>
          <div class="form-box">
            <span>质权登记期限:</span>
            <input
              type="text"
              class="form-control"
              placeholder="质权登记期限"
              :style="{border:redthree}"
              v-model="data.reg_term"
              @blur="deadShow"
            />
            <transition name="fade">
              <i v-if="deadlineHintShow">请填写此字段</i>
            </transition>
          </div>
          <div class="form-box">
            <span>是否共有商标(0不共有,1共有):</span>
            <input
              type="text"
              class="form-control"
              placeholder="是否共有商标(0不共有,1共有)"
              :style="{border:redthree}"
              v-model="data.status_mark"
              @blur="deadShow"
            />
            <transition name="fade">
              <i v-if="deadlineHintShow">请填写此字段</i>
            </transition>
          </div>
          <div class="form-box">
            <span>说明文件（批量上传）：</span>
            <el-button type="success" @click="explain = true">选择图片</el-button>
          </div>
          <div class="img-box">
            <el-image
              v-for="(item,index) in explainimg"
              :key="index"
              style="width: 100px; height: 100px; "
              :src="item.url"
              fit="cover"
              :preview-src-list="RxplainPreList"
            ></el-image>
          </div>
          <div class="form-box">
            <span>上传确认书：</span>
            <el-button type="success" @click="confirmation = true">选择图片</el-button>
          </div>
          <div class="img-box">
            <el-image
              v-for="(item,index) in confirmationimg"
              :key="index"
              style="width: 100px; height: 100px; "
              :src="item.url"
              fit="cover"
              :preview-src-list="ConfirmationPre"
            ></el-image>
          </div>
          <div class="r-f-sutbox">
            <span class="r-f-sut" @click="upimg">提交</span>
          </div>

          <!-- 选择图片 -->
          <!-- 说明文件 -->
          <el-dialog title="提示" :visible.sync="explain" center>
            <span>需要注意的是内容是默认不居中的</span>
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :file-list="explainimg"
              :on-change="changeRxplain"
              :limit="10"
              :on-exceed="exceesLimitRxplain"
              multiple
              drap
            >
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-delete" @click="removeRxplain(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
              <el-button @click="explain = false">取 消</el-button>
              <el-button type="primary" @click="explain = false">确 定</el-button>
            </span>
          </el-dialog>
          
          <!-- 选择图片 -->
          <!-- 上传确认书 -->
          <el-dialog title="提示" :visible.sync="confirmation" center>
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :file-list="confirmationimg"
              :on-change="changeConfirmation"
              :limit="1"
              :on-exceed="exceesLimitConfirmation"
              multiple
              drap
            >
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-delete" @click="removeConfirmation(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
              <el-button @click="confirmation = false">取 消</el-button>
              <el-button type="primary" @click="confirmation = false">确 定</el-button>
            </span>
          </el-dialog>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      data: {
        agency: "qw",
        amount_sec: "qw",
        docImgs: [],
        confirmImgs: null,
        code_apply: "",
        pledgee: "",
        pledgor: "",
        reg_number: "",
        reg_term: "",
        status_mark: ""
      },

      radio: "是",
      number: "",
      amount: "",
      deadline: "",
      numHintShow: false,
      amountHintShow: false,
      deadlineHintShow: false,
      redone: "",
      redtwo: "",
      redthree: "",
      // 删除图片按钮
      disabled: false,
      // 说明文件对话框
      explain: false,
      // 说明文件图片
      explainimg: [],
      // 确认书上传对话框
      confirmation: false,
      // 图片上传
      confirmationimg: [],
      formData: new FormData()
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    numShow() {
      if (this.number == "") {
        this.numHintShow = true;
        this.redone = "1px solid red";
      } else {
        this.numHintShow = false;
        this.redone = "";
      }
    },
    amountShow() {
      if (this.amount == "") {
        this.amountHintShow = true;
        this.redtwo = "1px solid red";
      } else {
        this.amountHintShow = false;
        this.redtwo = "";
      }
    },
    deadShow() {
      if (this.deadline == "") {
        this.deadlineHintShow = true;
        this.redthree = "1px solid red";
      } else {
        this.deadlineHintShow = false;
        this.redthree = "";
      }
    },
    // 文件说明
    changeRxplain(file, fileList) {
      this.formData.append("docImgs", file.raw);
      this.explainimg.push({ name: file.name, url: file.url, id: file.uid });
    },
    // 文件说明删除
    removeRxplain(file) {
      const index = this.explainimg.findIndex(el => el.uid === file.uid);
      index !== -1 && this.explainimg.splice(index, 1);
    },
    // 确认书
    changeConfirmation(file, fileList) {
      this.data.confirmImgs = file.raw;
      this.confirmationimg.push({
        name: file.name,
        url: file.url,
        id: file.uid
      });
    },
    // 确认书删除
    removeConfirmation(file) {
      const index = this.confirmationimg.findIndex(el => el.uid === file.uid);
      index !== -1 && this.confirmationimg.splice(index, 1);
    },
    // 文件说明图片数量超出限制
    exceesLimitRxplain() {
      alert("图片数量超出限制");
    },
    // 确认书图片超出限制
    exceesLimitConfirmation() {
      alert("图片数量超出限制");
    },

    // 图片上传
    upimg() {
      this.formData.append("agency", this.data.agency);
      this.formData.append("amount_sec", this.data.amount_sec);
      this.formData.append("confirmImgs", this.data.confirmImgs);
      this.formData.append("code_apply", this.data.code_apply);
      this.formData.append("pledgee", this.data.pledgee);
      this.formData.append("pledgor", this.data.pledgor);
      this.formData.append("reg_number", this.data.reg_number);
      this.formData.append("reg_term", this.data.reg_term);
      this.formData.append("status_mark", this.data.status_mark);
      //配置请求头
      var config = {
        header: {
          "Content-Type": "multipart/form-data"
        }
      };
      // axios向后端发送数据
      this.$http
        .post(
          "http://192.168.0.130:8080/proTPledge/update",
          this.formData,
          config
        )
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
    // 测试
  },
  computed: {
    // 文件说明预览数组
    RxplainPreList() {
      return this.explainimg.map(el => {
        return el.url;
      });
    },
    // 确认书预览数组
    ConfirmationPre() {
      return this.confirmationimg.map(el => {
        return el.url;
      });
    }
  }
};
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
i,
em {
  font-style: normal;
}
.register {
  width: 100%;
  background-color: #e7e8eb;
  .regbox {
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    .reg-title {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e7e8eb;
      h2 {
        font-size: 22px;
        font-weight: 300;
      }
    }
    .reg-form {
      padding: 20px;
      .form-box {
        display: flex;
        margin: 50px;
        span {
          font-size: 12px;
          width: 150px;
          height: 40px;
          line-height: 20px;
          text-align: right;
          margin-right: 20px;
          &::after {
            content: "*";
            font-size: 18px;
            color: red;
          }
        }
        input {
          width: 500px;
          padding: 7px 12px;
          vertical-align: middle;
          outline: none;
          border: 1px solid #e7e7eb;
          transition: 0.5s;
        }
        i {
          font-size: 12px;
          color: red;
          line-height: 40px;
          margin-left: 20px;
        }
      }
      .img-box {
        padding: 0 120px;
        .el-image {
          margin: 0 5px;
        }
      }
      .r-f-sutbox {
        margin-top: 50px;
        text-align: center;
        .r-f-sut {
          padding: 12px 20px;
          color: #fff;
          border: none;
          outline: none;
          border-radius: 5px;
          cursor: pointer;
          background-color: #67c23a;
        }
      }
    }
  }
}
</style>
